<template>
  <div class="app">
    <div class="top">
      <button :class="{ active: curTab === 'Posts' }" @click="curTab = 'Posts'">
        Posts
      </button>

      <button
        :class="{ active: curTab === 'Archive' }"
        @click="curTab = 'Archive'"
      >
        Archive
      </button>
      <button :class="{ active: curTab === 'Word' }" @click="curTab = 'Word'">
        Word
      </button>
    </div>

    <div class="body">
      <!-- 
        禁用 HelloWord 组件的缓存

        :include="['HelloPosts', 'HelloArchive']"
        :exclude="['HelloWord']"

       -->
      <keep-alive :max="2">
        <component :is="curTabComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import HelloPosts from "./components/HelloPosts.vue";
import HelloArchive from "./components/HelloArchive.vue";
import HelloWord from "./components/HelloWord.vue";

export default {
  name: "App",

  components: {
    HelloPosts,
    HelloArchive,
    HelloWord,
  },

  data() {
    return {
      curTab: "Posts",
    };
  },

  computed: {
    curTabComponent() {
      return `Hello${this.curTab}`;
    },
  },
};
</script>

<style>
.active {
  color: red;
}
</style>
